<template>
  <div class="box">
    <van-nav-bar title="预约" left-text="返回" left-arrow @click-left="$router.back()" />
    <div class="content">
    <van-image radius="10" width="100%" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    <h1>预约时间</h1>
    <!-- 点击选择日期 -->
    <van-cell title="选择日期" :value="date" @click="show = true" />
    <van-calendar v-model:show="show" @confirm="onConfirm" />

    <!-- 点击选择时间 -->
    <!-- <van-time-picker v-model="currentTime" title="选择时间" @confirm="onConfirm1"/> -->

    <h1>人数</h1>
    <div class="step">
      <van-stepper v-model="num" theme="round" button-size="22" disable-input />
    </div>
    <div class="people"><span v-for="item in peopleNum" :key="item" @click="setNum(item)">{{ item }}人</span></div>
    <!-- 预约按钮 -->
    <van-button round block type="primary" @click="registerHandler">
      预约
    </van-button>

  <div class="box1">
    <span class="left">预约说明</span>
    <span class="right">预约成功后，请您在预约时段到来前，先前往餐馆先行入座！超时将视为放弃预约！</span>
  </div>
  <h3>请仔细阅读以下</h3>
  <div class="box2">
    <h4>预约须知</h4>
    <p>本服务为主题咖生活服务，请悉知以下信用风险：</p>
    <p>一、请不要发起空头预约、如有个人原因请前往个人中心取消预约。</p>
    <p>二、恶意预约将对您的用户信用及至臻等级造成影响</p>
    <p>三、本服务仅提供服务预约入口，如有预约上的问题，请以服务商为准</p>
  </div>
</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router'
import {getOrderList} from '@/api/order.js'

//时间
const peopleNum = ref([2, 4, 6, 8])

const show = ref(false);
const date = ref('');

const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (value) => {
  show.value = false;
  date.value = formatDate(value);
};
//进步器
const value = ref(1);
//人数
const num = ref(0)
//设置人数
function setNum(e) {
  num.value = e
}
//声明组件中数据的初始值
const value1 = ref(0)
const result1 = ref(0)
//使用路由
const router = useRouter()
//发送请求，存储预约详情
function registerHandler() {
  
  getOrderList().then(res => {
    console.log(res.data);
    if (res.data.data.code === '200') {
      showSuccessToast('预约成功');
      setTimeout(()=>{
        router.push('/confirm')
      },1000)
      
    }
  })
}
//提示用户预约成功
//跳转详情页
</script>
 
<style scoped lang="scss">
.box {
  padding: 10px;

  h1 {
    text-align: center;
    height: 40px;
    line-height: 40px;
  }

  .step {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .people {
    border: 0;
    height: 40px;
    width: 60%;
    // background-color: aqua;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 20px;
    line-height: 20px;
    text-align: center;

    span {
      width: 30px;
      border: 1px solid black;
      border-radius: 5px;
    }
  }

  .van-button {
    margin: 20px auto;
  }
}

.box1 {
  height: 43px;
  padding: 10px;
  text-decoration: none;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  background-color: rgb(249, 247, 245);
  justify-content: center;
  align-items: center;

  .left {
    width: 80px;
    height: 30px;
    font-weight: 400;
    font-size: 12px;
    color: rgb(153, 153, 153);
    padding-top: 15px;
    font-style: normal;
    letter-spacing: 0px;
    line-height: 17px;
    border-right: 1px solid rgb(153, 153, 153);
    margin-right: 10px;
  }

  .right {
    color: rgb(89, 87, 87);

  }
}

h3 {
  margin: 20px 0 10px 10px;
  font-family: PingFangSC;
  font-weight: 400;
  font-size: 12px;
  color: rgb(153, 153, 153);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 17px;
  text-decoration: none;
}

.box2 {
  width: 375px;
  height: 168px;
  box-sizing: border-box;
  border-color: rgb(187, 187, 187);
  border-width: 0px;
  border-style: solid;
  border-radius: 0px;
  font-size: 14px;
  padding: 0 10px;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  color: rgb(153, 153, 153);
  ;
  background-color: rgb(249, 247, 245);

  h4 {
    height: 40px;
    line-height: 40px;
  }
}</style>